<!--
  * 门店表
  *
  * @Author:    zhoujk
  * @Date:      2025-01-26 06:40:44
-->
<template>
  <a-modal :width="700" :open="visibleFlag" @cancel="onClose" :maskClosable="false" :destroyOnClose="true" :footer="false">
    <template #title>
      <div ref="modalTitleRef" style="width: 100%; cursor: move; display: flex; justify-content: space-between">
        <div style="font-size: 18px">查看商户信息</div>
        <!-- <div style="width: 80%; display: flex; justify-content: space-around; font-weight: 400; font-size: 14px; align-items: flex-end">
          <div style="font-weight: 400">状态：{{ form.status ? '启用' : '禁用' }}</div>
          <div>入网时间：{{ formatTime(form?.cTime) }}</div>
        </div> -->
      </div>
    </template>
    <a-descriptions style="padding: 10px 30px" :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }">
      <a-descriptions-item label="登录账号">
        {{ form.no }}
      </a-descriptions-item>
      <a-descriptions-item label="商户名称">{{ form.companyName }}</a-descriptions-item>
      <a-descriptions-item label="状态：">{{ selectDictLabel(ZZB_MCH_NO_STATUS, form.status) }}</a-descriptions-item>
      <a-descriptions-item label="入网时间：">{{ formatTime(form?.cTime) }}</a-descriptions-item>
      <a-descriptions-item label="所属代理商">{{ form.agentInfo?.companyName }}</a-descriptions-item>
      <a-descriptions-item label="代理商等级">{{ form.agentInfo?.level }}</a-descriptions-item>
      <a-descriptions-item label="代理商联系人">{{ form.agentInfo?.name }}</a-descriptions-item>
      <a-descriptions-item label="代理商联系号码">{{ form.agentInfo?.phone }}</a-descriptions-item>
      <a-descriptions-item label="商户联系人">{{ form.name }}</a-descriptions-item>
      <a-descriptions-item label="商户联系号码">{{ form.phone }}</a-descriptions-item>
      <a-descriptions-item :span="6" label="开户业务人员">{{ form.exhibitionName }}</a-descriptions-item>
      <a-descriptions-item :span="6" label="商户地址">{{ form.area }}{{ form.addr }}</a-descriptions-item>
      <a-descriptions-item style="padding-bottom: 0" :span="6" label="备注">{{ form.remark }}</a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script setup>
  import { nextTick, reactive, ref } from 'vue'
  import { merchantApi } from '/src/api/business/b-operation/merchant/merchant-api'
  import dayjs from 'dayjs'
  import _ from 'lodash'
  import { selectDictLabel } from '/@/utils/common'
  import { ZZB_MCH_NO_STATUS } from '/@/constants/dict'

  // ------------------------ 事件 ------------------------

  const emits = defineEmits(['reloadList'])

  // ------------------------ 显示与隐藏 ------------------------
  // 是否显示
  const visibleFlag = ref(false)

  function show(rowData) {
    Object.assign(form, formDefault)

    merchantApi.findOne({ id: rowData.id }).then((res) => {
      if (res.data && !_.isEmpty(res.data)) {
        Object.assign(form, res.data)
      }
    })
    // 使用字典时把下面这注释修改成自己的字典字段 有多个字典字段就复制多份同理修改 不然打开表单时不显示字典初始值
    // if (form.status && form.status.length > 0) {
    //   form.status = form.status.map((e) => e.valueCode)
    // }
    visibleFlag.value = true
    nextTick(() => {
      formRef.value.clearValidate()
    })
  }

  function onClose() {
    Object.assign(form, formDefault)
    visibleFlag.value = false
  }

  // ------------------------ 表单 ------------------------

  // 组件ref
  const formRef = ref()

  const formDefault = {
    no: undefined, // 商户
    cTime: undefined, // 商户
    status: undefined, // 商户
    companyName: undefined, // 商户
    name: undefined, // 商户
    phone: undefined, // 商户
    exhibitionId: undefined, // 商户
    areaCode: undefined, // 商户
    addr: undefined, // 商户
    remark: undefined, // 商户
    agentInfo: undefined, // 代理商
    exhibitionName: undefined,
  }

  // 格式化函数（组合式API）
  const formatTime = (timestamp) => {
    return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
  }

  let form = reactive({ ...formDefault })

  defineExpose({
    show,
  })
</script>
